<template>
  <a-card class="a-card">
    <template #title>
      <Icon icon="notebook|svg" />
      {{ workbench('todo') }}
    </template>
    <div style="font-size: 15px">
      <a-card-grid style="width: 50%; text-align: center" class="a-card-grid" @click="$router.push({ path: '/assetapproval/assetApprovalList' })">
        <span> {{ workbench('uncheck') }}</span>
        <div class="rounded-rectangle">{{ props.checkCount }}</div>
      </a-card-grid>
      <a-card-grid style="width: 50%; text-align: center" class="a-card-grid" @click="$router.push({ path: '/asset/todo-inventory-task' })">
        <span>{{ workbench('uninventory') }}</span>
        <div class="rounded-rectangle">{{ props.count }}</div>
      </a-card-grid>
    </div>
  </a-card>
</template>
<script lang="ts" setup>
  import { useI18n } from '/@/hooks/web/useI18n';
  const { t: workbench } = useI18n('dashboard.workbench');
  const props = defineProps({
    count: {
      type: Number as PropType<number>,
      required: true,
    },
    checkCount: {
      type: Number as PropType<number>,
      required: true,
    },
  });
</script>

<style lang="less" scoped>
  .a-card-grid {
    cursor: pointer;
  }
  .count {
    color: rgb(9, 143, 221);
  }
  :deep(.ant-card-body) {
    padding: 0;
  }
  .rounded-rectangle {
    display: inline-block;
    padding: auto;
    color: #fff;
    background-color: #31ce7f;
    width: 40px;
    height: 20px;
    line-height: 20px;
    border-radius: 10px;
    margin-left: 15px;
  }
</style>
